<template>
	<view>
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar title="个人信息" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>
		<view
			class="coreshop-bg-white coreshop-solid-top coreshop-padding-left-40 coreshop-padding-right-40 coreshop-padding-top-20 coreshop-padding-bottom-20 coreshop-margin-bottom-10">
			<view class="coreshop-text-center coreshop-margin-bottom-10">
				<text class="coreshop-text-black">加油</text>
				<text class="coreshop-font-40" style="color: #D0241C;">{{percentage}}%</text>
				<text class="coreshop-text-black">，太棒啦！</text>
			</view>
			<u-line-progress :percentage="percentage" activeColor="#D0241C"></u-line-progress>
		</view>
		<view class="coreshop-list menu coreshop-bg-white coreshop-padding-15">
			<u--form :model="model" :rules="rules" ref="uForm" errorType="message" labelPosition="left" labelWidth="80">
				<u-form-item label="头像：" borderBottom>
					<u-avatar :src="model.avatar" @click="uploadAvatar" size="60" shape="square"></u-avatar>
					<u-button slot="right" type="primary" size="mini" @click="uploadAvatar">选择图片</u-button>
				</u-form-item>
				<u-form-item label="昵称：" prop="nickname" borderBottom>
					<u--input border="none" v-model="model.nickname" />
				</u-form-item>
				<u-form-item label="性别：" prop="sex" borderBottom @click="actionSheetShow = true">
					<u--input border="none" type="select" v-model="model.sex" disabled disabledColor="#ffffff"
						placeholder="请选择性别"></u--input>
					<u-button slot="right" type="primary" size="mini" @click="actionSheetShow = true">选择性别</u-button>
				</u-form-item>
				<u-form-item label="生日：" prop="birthday" borderBottom>
					<u--input border="none" v-model="model.birthday" />
					<u-datetime-picker ref="datetimePicker" v-model="birthdayTemporary" :show="show"
						:formatter="formatter" :minDate="-639129600000" :maxDate="1638725469000" mode="date"
						@confirm="bindDateChange" @cancel="show = false"></u-datetime-picker>
					<u-button slot="right" type="primary" size="mini" @click="show = true">选择日期</u-button>
				</u-form-item>
			</u--form>
		</view>
		<!--按钮-->
		<view class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom">
			<u-button type="error" size="normal" @click="submitHandler()" :disabled='submitStatus'
				:loading='submitStatus'>保存</u-button>
		</view>
		<u-action-sheet :actions="actionSheetList" :show="actionSheetShow" @close="actionSheetShow = false"
			@select="actionSheetCallback"></u-action-sheet>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					birthday: '',
					nickname: '',
					sex: '',
					sexIndex: 0,
					avatar: '',
					mobile: '',
				},
				birthdayTemporary: '',
				showCalendar: false,
				show: false,
				calendarMode: 'date',
				actionSheetShow: false,
				actionSheetList: [{
						name: '男'
					},
					{
						name: '女'
					},
					{
						name: '保密'
					}
				],
				rules: {
					nickname: [{
							required: true,
							message: '请输入昵称',
							trigger: 'blur',
						},
						{
							min: 2,
							max: 16,
							message: '昵称长度在2到16个长度',
							trigger: ['change', 'blur'],
						},
						//{
						//    validator: (rule, value, callback) => {
						//        return this.$u.test.chinese(value);
						//    },
						//    message: '昵称必须为中文',
						//    trigger: ['change', 'blur'],
						//}
					],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: 'change'
					}, ],
					birthday: [{
						required: true,
						message: '请选择生日',
						trigger: 'blur',
					}],
				},
				index: 2,
				submitStatus: false,
				percentage: 0,

			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			//生日
			bindDateChange: function(e) {
				var time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.model.birthday = time;
				this.show = false;
			},
			// 点击actionSheet回调
			actionSheetCallback(e) {
				var _this = this;
				uni.hideKeyboard();
				for (var i = 0; i < this.actionSheetList.length; i++) {
					if (e.name == this.actionSheetList[i].name) {
						_this.model.sexIndex = i;
					}
				}
				this.model.sex = e.name
				this.$refs.uForm.validateField('model.sexIndex')
			},
			// 用户上传头像
			uploadAvatar() {
				var _this = this;
				this.$upload.uploadFiles(null, res => {
					if (res.status) {
						// 上传成功的图片地址
						let avatar = res.data.src;
						// 执行头像修改
						_this.$u.api.changeAvatar({
							id: avatar
						}).then(res => {
							if (res.status) {
								_this.$refs.uToast.show({
									message: '上传成功',
									type: 'success',
									complete: function() {
										_this.model.avatar = res.data
									}
								})
							} else {
								_this.$u.toast(res.msg)
							}
						})
					} else {
						_this.$u.toast(res.msg)
					}
				})
			},
			// 保存资料
			submitHandler() {
				var _this = this;
				this.submitStatus = true;
				if (!!!this.model.birthday) {
					this.$refs.uToast.show({
						message: '请选择出生日期',
						type: 'error'
					})
					this.submitStatus = false;
					return false;
				}
				this.$refs.uForm.validate().then(res => {
					let sex = parseInt(this.model.sexIndex) + 1;
					this.$u.api.editInfo({
						sex: sex,
						birthday: this.model.birthday,
						nickname: this.model.nickname
					}).then(res => {
						if (res.status) {
							this.submitStatus = false;
							this.$refs.uToast.show({
								message: res.msg,
								type: 'success',
								complete: function() {
									_this.goUserCenter();
								}
							})
						} else {
							this.submitStatus = false;
							_this.$u.toast(res.msg);
						}
					});
				}).catch(errors => {
					this.$refs.uToast.show({
						message: '提交的数据校验失败，请输入合法信息！',
						type: 'error'
					})
					this.submitStatus = false;
				})
			}
		},
		onLoad: function() {
			var _this = this;
			_this.$u.api.userInfo().then(res => {
				if (res.status) {
					if (res.data.birthday) {
						_this.model.birthday = uni.$u.timeFormat(res.data.birthday, 'yyyy-mm-dd');
					}
					_this.birthdayTemporary = _this.model.birthday;
					_this.model.nickname = res.data.nickName;
					_this.model.mobile = res.data.mobile;

					if (res.data.birthday) {
						_this.percentage += 25;
					}
					if (res.data.nickName) {
						_this.percentage += 25;
					}
					if (res.data.mobile) {
						_this.percentage += 25;
					}
					if (res.data.avatarImage) {
						_this.percentage += 25;
					}

					if (res.data.sex && res.data.sex == 0) {
						_this.model.sex = _this.actionSheetList[2].name;
					} else {
						_this.model.sex = _this.actionSheetList[res.data.sex - 1].name;
					}
					_this.model.avatar = res.data.avatarImage;
				} else {
					//报错了
					_this.$u.toast(res.msg);
				}
			});
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

<style scoped lang="scss">
	/deep/ .u-button--primary {
		width: 145rpx !important;
		height: 60rpx !important;
		line-height: 60rpx !important;
		background-color: #1D82FF !important;
		border-radius: 20rpx;
	}

	/deep/ .u-button--error {
		background-color: #D0241C !important;
	}

	/deep/ .u-form-item__body {
		padding: 16px 0;
	}

	/deep/ .u-form-item__body__right__content__slot {
		display: flex;
		padding: 0 30rpx;
	}
</style>